<!DOCTYPE html>
<ui:composition template="/master.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">

	<ui:define name="content">
		            <br />
            <h:outputText value="Salon: #{menuBean.salon.nombreSalon}" />
			<br />	
					
		<p:panel id="basic" header="Agregar Menú" style="width:900px"
			styleClass="fondo">

			
			<h:panelGrid columns="2" cellpadding="5">
					<h:outputLabel for="clasificacion" value="Clasificación:" />
						<p:selectOneMenu id="comboClasificacion"
							converter="clasificacionmenuConverter"
							value="#{menuBean.clasificacionmenuSelected}" effect="fade" var="c"
							filter="true" filterMatchMode="startsWith">

							<f:selectItems var="car" value="#{menuBean.listClasificacionmenu}"
								itemLabel="#{car.nombre}" itemValue="#{car}" />
							<p:column>
								<h:outputText value="#{c.nombre}" />
							</p:column>
						</p:selectOneMenu>		
						
					<h:outputLabel for="tipo" value="Tipo:" />
						<p:selectOneMenu id="comboTipo"
							converter="tipomenuConverter"
							value="#{menuBean.tipomenuSelected}" effect="fade" var="c"
							filter="true" filterMatchMode="startsWith">

							<f:selectItems var="car" value="#{menuBean.listTipomenu}"
								itemLabel="#{car.nombre}" itemValue="#{car}" />
							<p:column>
								<h:outputText value="#{c.nombre}" />
							</p:column>
						</p:selectOneMenu>			
							
			
				<h:outputLabel for="menu" value="Nombre Menú: " />
				<p:inputText value="#{menuBean.menu.nombre}" required="false"/>

				<h:outputLabel for="desc" value="Descripción:" />
				<p:inputText value="#{menuBean.menu.descripcion}" required="false"/>

				<h:outputLabel value="Preparación:" />
				<p:inputText value="#{menuBean.menu.preparacion}" required="false"/>
				
				<h:outputLabel for="menu" value="Precio por Persona $: " />
				<p:inputText value="#{menuBean.menu.precio}" required="false"/>				
			</h:panelGrid>

			<p:panel id="insumo" header="Insumos"
				style="background-color:rgba(0,0,0,0);">
									
				<h:panelGrid columns="2" cellpadding="5">
					<h:outputLabel for="insumos" value="Ingrediente:" />
						<p:selectOneMenu id="comboIngredientes"
							converter="insumoConverter"
							value="#{menuBean.insumoSelected}" effect="fade" var="c"
							filter="true" filterMatchMode="startsWith">

							<f:selectItems var="car" value="#{menuBean.listInsumo}"
								itemLabel="#{car.nombreInsumo}" itemValue="#{car}" />
							<p:column>
								<h:outputText value="#{c.nombreInsumo}" />
							</p:column>
						</p:selectOneMenu>
						
					<h:outputLabel for="cant" value="Cantidad:" />
					<p:inputText value="#{menuBean.detallemenu.cantidad}" />

					<h:outputLabel for="cant" value="Unidad de medida:" />
											<p:selectOneMenu id="comboUnidMedida"
							converter="unidadMedidaConverter"
							value="#{menuBean.unidadMedidaSelected}" effect="fade" var="c"
							filter="true" filterMatchMode="startsWith">

							<f:selectItems var="car" value="#{menuBean.listUnidadMedida}"
								itemLabel="#{car.nombreMedida}" itemValue="#{car}" />
							<p:column>
								<h:outputText value="#{c.nombreMedida}" />
							</p:column>
						</p:selectOneMenu>

				</h:panelGrid>
				
<br />
							<p:commandButton value="Agregar" id="btnAgregarIngredientes" icon="ui-icon-disk" process="@this,insumo"
								update="tablaIngredientes" action="#{menuBean.agregarIngrediente}" />
<br />
<br />

				<p:dataTable id="tablaIngredientes" var="ing" value="#{menuBean.listDetallemenu}" selection=""
								rowKey="#{ing.idInsumo}" emptyMessage="Tabla vacía.">

					<p:column headerText="Ingredientes">
									<p:cellEditor>
										<f:facet name="output">
											<h:outputText value="#{ing.insumo.nombreInsumo}" />
										</f:facet>
										<f:facet name="input">
											<p:inputText id="insumoInput"
												value="#{ing.insumo.nombreInsumo}" style="width:100%" />
										</f:facet>
									</p:cellEditor>
					</p:column>

					<p:column headerText="Cantidad">
									<p:cellEditor>
										<f:facet name="output">
											<h:outputText value="#{ing.cantidad}" />
										</f:facet>
										<f:facet name="input">
											<p:inputText id="cantInput"
												value="#{ing.cantidad}" style="width:100%" />
										</f:facet>
									</p:cellEditor>
					</p:column>
					
					<p:column headerText="Unidad Medida">
									<p:cellEditor>
										<f:facet name="output">
											<h:outputText value="#{ing.unidadmedida.nombreMedida}" />
										</f:facet>
										<f:facet name="input">
											<p:inputText id="uniInput"
												value="#{ing.unidadmedida.nombreMedida}" style="width:100%" />
										</f:facet>
									</p:cellEditor>
					</p:column>

					<p:column style="width:70px;text-align: center"
						headerText="Eliminar">
									<p:commandButton process="@this"
										update="tablaIngredientes" icon="ui-icon-close"
										title="View" action="#{menuBean.eliminarIngrediente}">
										
										<f:setPropertyActionListener value="#{ing}"
											target="#{menuBean.detallemenuSelected}" />
							
									</p:commandButton>

					</p:column>

				</p:dataTable>

			</p:panel>
			
					
			<br />
					<p:separator />
					<br />
					<h:outputText value="Fotos" styleClass="letra" />
					<br />
					<h:outputText
						value="Seleccione la foto del menú. Tambien las puede arrastrar al cuadro.MAX(1,5 MB)" />
					<br />
					<br />
					
					<p:fileUpload mode="advanced" dragDropSupport="true" value="#{menuBean.file}" multiple="true" fileLimit="1"
						label="Seleccionar" uploadLabel="Subir" cancelLabel="Cancelar" update="messages" sizeLimit="1500000"
						allowTypes="/(\.|\/)(gif|jpe?g|png)$/" fileUploadListener="#{menuBean.fileUploadListener}" />

					<p:growl id="messages" showDetail="true" />
		<br />
			<p:commandButton value="Guardar" icon="ui-icon-disk" action="#{menuBean.guardarMenu}"/>

		</p:panel>

			

	</ui:define>
</ui:composition>
